<script setup>
  import {ref} from "vue";

  const userState=ref({
    name:'张三',
    src:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    isLogin: true
  })

</script>

<template>
  <div class="UserDetails">
    <div class="operation">
      <el-button v-show="userState.isLogin" type="primary">退出</el-button>
      <el-button v-show="!userState.isLogin" type="primary">登录</el-button>
    </div>
    <div class="user">
      {{userState.name}}
    </div>
    <div class="avatar">
      <el-avatar :src="userState.src"/>
    </div>
    <div class="title">
      <h3>欢迎来到自主相册系统</h3>
    </div>
  </div>
</template>
<style scoped>
.UserDetails{
  position: relative;
  width: 100%;
  height: 50%;
  background: #353535FF;
}
.user{
  position: relative;
  width: 5%;
  height: 50%;
  float: right;
  text-align: center;
  top: 30%;
  color: white;
}
.avatar{
  position: relative;
  width: 3%;
  height: 60%;
  float: right;
  text-align: center;
  top: 20%;
}
.operation{
  position: relative;
  width: 5%;
  height: 60%;
  float: right;
  text-align: center;
  top: 26%;
}
.title{
  position: relative;
  left: 45%;
  top: 40%;
  width: 15%;
  height: 60%;
  color: white;
}
</style>